<script setup lang="tsx">
import { getCommissionBillListApi } from '@/api/financial'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { CommissionBillTradeTypeDict, dictToList } from '@/utils/dict'

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await getCommissionBillListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list || [],
      total: res.data.total || 0
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods

const addPrefix = (code) => {
  if (code.startsWith('SONO')) {
    return '订单号: ' + code
  } else if (code.startsWith('WBO')) {
    return '提现单号: ' + code
  } else {
    return code // 如果不是SON或WBO开头，直接返回原字符串
  }
}

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'id',
    label: 'ID',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'tradeType',
    label: '变动类型',
    search: {
      component: 'Select',
      componentProps: {
        options: dictToList(CommissionBillTradeTypeDict)
      }
    },
    form: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <span>{row.tradeType && CommissionBillTradeTypeDict[row.tradeType]}</span>
            </>
          )
        }
      }
    }
  },
  {
    field: 'nickName',
    label: '经纪人名称',
    search: {
      componentProps: {
        placeholder: '请输入经纪人名称'
      }
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'mobile',
    label: '手机号',
    search: {
      componentProps: {
        placeholder: '请输入手机号'
      }
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'beforeAmt',
    label: '变动前余额',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'tradeAmt',
    label: '变动金额',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              {row.billType === 1 && row.tradeAmt && (
                <span style="color:#D9001B">+{row.tradeAmt}</span>
              )}
              {row.billType === 2 && row.tradeAmt && (
                <span style="color:#32C000">-{row.tradeAmt}</span>
              )}
            </>
          )
        }
      }
    }
  },
  {
    field: 'afterAmt',
    label: '变动后余额',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'relationTradeNo',
    label: '关联业务号',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      width: 220,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <span>{addPrefix(row.relationTradeNo)}</span>
            </>
          )
        }
      }
    }
  },
  {
    field: 'createTime',
    label: '变动时间',
    search: {
      component: 'DatePicker',
      componentProps: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    },
    form: {
      hidden: true
    },
    table: {
      width: 220
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const searchParams = ref({})
const setSearchParams = (params: any) => {
  const { createTime, ...rest } = params
  let startTradeTime, endTradeTime
  if (createTime && createTime.length > 0) {
    startTradeTime = createTime[0]
    endTradeTime = createTime[1]
  }
  currentPage.value = 1
  searchParams.value = {
    startTradeTime,
    endTradeTime,
    ...rest
  }
  getList()
}
</script>

<template>
  <div class="flex w-100% h-100%">
    <ContentWrap class="flex-[3] ml-20px">
      <Search
        :schema="allSchemas.searchSchema"
        @reset="setSearchParams"
        @search="setSearchParams"
      />
      <Table
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :columns="allSchemas.tableColumns"
        :data="dataList"
        :loading="loading"
        @register="tableRegister"
        :pagination="{
          total
        }"
      />
    </ContentWrap>
  </div>
</template>
